import React, { useState, useEffect } from 'react'
import { Table, Button } from "antd"

export default () => {
    let list = [
        {
            key: '1',
            id: 1,
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            key: '2',
            id: 2,
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        },
        {
            key: '3',
            id: 3,
            name: 'lala',
            age: 18,
            address: '金融港',
        },
    ]

    const [dataSource, setData] = useState(list);
    let del = (id: any) => {
        list = list.filter((item: any) => item.id != id)
        setData(list)
    }


    const [header, setHeader] = useState([
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: 'Action',
            key: 'action',
            render: (text: any, record: any) => (
                <Button size="middle" onClick={() => {
                    del(record.id);
                }}>
                    删除
                </Button>
            ),
        },
    ]);


    return (
        <div>
            <Table dataSource={dataSource} columns={header} />
        </div>
    )
}

